pp108 : Combo (Deprecated)

Combo (Deprecated)

Creates a list box or a drop-down list.

This library is deprecated; use DropDown or Listbox instead.

Syntax

HTML

<eibus:select id=selectID>
<div>...</div>
<div>...</div>
... ...
</eibus:select>

The combo component consists of an <eibus:select> tag and a collection of <DIV> tags inside them. This component can be used to display a list of items in a combo box or a list box. The users can then select an item from the list for their own use.

To dynamically add and initialize this component, you can use the initializeHTMLElements or addTypemethods of the Application object.

The properties, methods, and events defined for this component are as follows:

Table 1. List of Attributes

Attribute

Property

Description

options

options

Array that retrieves the collection of DIV objects in a combo box.

selectType

selectType

String that specifies the type of selection allowed by the combo control.

  • single: Default. The type of element displayed will be a combo box, where only one element is selectable.
  • multiple: The type of element displayed will be a list box, from which multiple values can be selected at a time.

editable

N/A

Specifies whether the combo box is editable or not.

  • true: Combo box is editable. To edit the content in the combo box, select the element to edit, and click the element to get the cursor inside it. Then the value can be typed in.
  • false: Default. Combo box is not editable.

enabled

N/A

Sets the enabled property that denotes whether the combo box is enabled or not. The values can be:

  • true: Default. Combo box is enabled.
  • false: Combo box is disabled.

multipleSelect

N/A

Sets the multipleselect property that denCombo box is disabled. Denotes whether the user can select single or multiple options. This property is applicable only when the selectType property is set to multiple, that is only when the eibus:select is used as a listbox. The values can be:

  • true: Default. The user can select one or more options from the listbox.
  • false: The user can select only one option from the list box.
Table 2. List of Methods

Method

Description

add

Adds a DIV element to the combo box.

remove(index)

Removes an element from the combo box.indexis a required parameter that denotes the index of the element that is to be removed.

getEnabled

Gets the value of the enabled property.

setEnabled

Sets the enabled property that denotes whether the combo box is enabled or not. The values can be:

  • true: (Default) Combo box is enabled.
  • false: Combo box is disabled.

setEditable

Specifies whether the combo box is editable or not.

  • true: Combo box is editable. To edit the content in the combo box, select the element to edit, and click the element to get the cursor inside it. Then the value can be typed in.
  • false: (Default) Combo box is not editable. This method can be used on the combo box only when selectType property is "single".

getMultipleSelect

Gets the value of the multipleselect property.

setMultipleSelect

Sets the multipleselect property that denotes whether the user can select single or multiple options. This property is applicable only when the selectType property is set to multiple, that is only when the eibus:select is used as a listbox. The values can be:

  • true: (Default) The user can select one or more options from the listbox.
  • false: The user can select only one option from the list box.

getSelectedIndex

Gets the index of the selected DIV in a combo box.

setSelectedIndex

Sets the index of the selected DIV in a combo box. By default the selectedIndex is

0.

getValue

Gets the value which is contained in the combo box.

setValue

Sets the value which is contained in the combo box.

Table 3. List of Events

Event

Description

onchange

Fires when the contents of the object selected have changed.

onselectchange

Fires before the contents of the object selected is changed.


Attribute/Property

Description

fontWeight

Sets or retrieves the weight of the font of the object

fontSize

Sets or retrieves a value that indicates the font size used for text in the object.

fontFamily

Sets or retrieves the name of the font used for text in the object.

fontVariant

Sets or retrieves whether the text of the object is in small capital letters.

fontStyle

Sets or retrieves the font style of the object as italic, normal, or oblique.

The following keys are supported to provide easy navigation in the list.

  • [arrow up]: Go to previous Item in the list.
  • [arrow down]: Go to next Item in the list.
  • Ctrl + [arrow up]: Deselect multiple items from the list.
  • Ctrl + [arrow down]: Select multiple items from the list.

Note:
This component can be used as a replacement to the Microsoft's SELECT component because the SELECT component is a window control. Using a window control will make the control appear above all the HTML controls even if the z-index property is set to a higher value.

Example

The following example shows the usage of the behavior:

<html xmlns:eibus>
<head>
    <title>Combo Demo</title>
    <script src="/cordys/wcp/application.js"></script>
    <script language="JScript">
        function setOnChange()
        {
            myCombo.onchange = (window.event.srcElement.checked == true) ? alertInfo : null;
        }
        function addItem()
        {
            var itemName = prompt("Enter a name for the item");
            if (itemName)
            {
                var itemValue = prompt("Enter a name for the item");
                if (itemValue)
                {
                    myList.add(itemName, itemValue);
                    myCombo.add(itemName, itemValue);
                    application.notify("Added !");
                }
            }
        }
        function removeItem()
        {
            var itemIndex = prompt("Enter the index of the item to remove");
            if (itemIndex)
            {
                myList.remove(itemIndex);
                myCombo.remove(itemIndex);
                application.notify("Removed !");
            }
        }
        function getOptions()
        {
            var alertText = "Combo Box :\n\n";
            for (var i = 0; i < myCombo.options.length; i++)
            {
                alertText += myCombo.options[i].outerHTML + "\n\n";
            }
            application.notify(alertText);
            var alertText = "List Box :\n\n";
            for (var i = 0; i < myList.options.length; i++)
            {
                alertText += myList.options[i].outerHTML + "\n\n";
            }
            application.notify(alertText);
        }

        function alertInfo()
        {
            var alertText = "Element Information :\n\n";
            alertText += "Selected Index : " + window.application.event.srcElement.getSelectedIndex() + "\n\n";
            alertText += "Item : " + window.application.event.srcElement.options[window.application.event.srcElement.getSelectedIndex()].outerHTML + "\n\n";
            alertText += "Text : " + window.application.event.srcElement.options[window.application.event.srcElement.getSelectedIndex()].innerText + "\n\n";
            alertText += "Value : " + window.application.event.srcElement.getValue();
            application.notify(alertText);
        }
    </script>
</head>
<body>
    <h4>Combo Component</h4>Combo Box :
    <br/><br/>
    <eibus:select id="myCombo" style="width:150px;height:20px">
        <div selected="true" value="1">Test1</div>
        <div value="2">Test2</div>
        <div value="3">Test3</div>
        <div value="4">Test4</div>
    </eibus:select>
    <br><input type="checkbox" onchange="setOnChange()"/> Notify "onchange"
    <br><br>List Box :<br><br>
    <eibus:select class="input" id="myList" selectType="multiple" style="width:150px;height:120px">
        <div value="1">Test1</div>
        <div value="2">Test2</div>
        <div value="3">Test3</div>
        <div value="4">Test4</div>
    </eibus:select>
    <br><br>
    <button class="medium" onclick="addItem()">Add</button>
    <button class="medium" onclick="removeItem()">Remove</button>
    <button class="medium" onclick="getOptions()">Options</button>
</body>
</html>